<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomEdit('学员学习报表',~{::style})">
    <style>
        textarea {
            resize: vertical;
            min-height: 50px;
        }
        .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            vertical-align: middle;
            padding-left: 0;
            padding-right: 0;
            padding-top: 0;
        }
        .thumbnail>p{
            text-align: center;
            font-weight: bold;
        }
        .thumbnailFloat{
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 10px;
            margin-bottom: 5px !important;
            height:70px;
            max-width: 50px;
            float: left;
        }
    </style>
</head>
<body>
<div class="ch-container">
    <br>
    <div class="row">
        <form th:action="@{/student/report/create/feedback}" method="post" onsubmit="return checkFeedbackForm()">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <tr>
                        <td class="text-center">反馈时间段</td>
                        <td style="padding: 5px 5px;">
                            <span>开始日期：<input name="startDate" id="startDate" class="form-inline input-sm" readonly autocomplete="off" maxlength="20" th:value="${#dates.format(startTime,'yyyy-MM-dd HH:mm:ss')}"> </span>
                            <span style="margin-left: 50px;">结束日期：<input name="endDate" id="endDate" class="form-inline input-sm" readonly autocomplete="off" maxlength="20" th:value="${#dates.format(endTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">总体情况</td>
                        <td style="padding-top: 10px;" th:if="${classInfo!=null}">
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="完成课时"></p>
                                <p style="color: red;" th:text="${classInfo.classNum}"></p>
                                <input type="hidden" name="classNum" th:value="${classInfo.classNum}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="获得星星"></p>
                                <p style="color: red;" th:text="${classInfo.starNum}"></p>
                                <input type="hidden" name="starNum" th:value="${classInfo.starNum}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="旷课次数"></p>
                                <p style="color: red;" th:text="${classInfo.noShowNum==null?0:classInfo.noShowNum}"></p>
                                <input type="hidden" name="noShowNum" th:value="${classInfo.noShowNum==null?0:classInfo.noShowNum}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="被点名数"></p>
                                <p style="color: red;" th:text="${classInfo.namedNum==null?0:classInfo.namedNum}"></p>
                                <input type="hidden" name="namedNum" th:value="${classInfo.namedNum==null?0:classInfo.namedNum}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="迟到次数"></p>
                                <p style="color: red;" th:text="${classInfo.lateNum==null?0:classInfo.lateNum}"></p>
                                <input type="hidden" name="lateNum" th:value="${classInfo.lateNum==null?0:classInfo.lateNum}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="听力理解"></p>
                                <p style="color: red;" th:text="${classInfo.listenAve}"></p>
                                <input type="hidden" name="listenAve" th:value="${classInfo.listenAve}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="发音准确"></p>
                                <p style="color: red;" th:text="${classInfo.pronunciationAve}"></p>
                                <input type="hidden" name="pronunciationAve" th:value="${classInfo.pronunciationAve}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="词汇掌握"></p>
                                <p style="color: red;" th:text="${classInfo.vocabularyAve}"></p>
                                <input type="hidden" name="vocabularyAve" th:value="${classInfo.vocabularyAve}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="语法掌握"></p>
                                <p style="color: red;" th:text="${classInfo.grammarAve}"></p>
                                <input type="hidden" name="grammarAve" th:value="${classInfo.grammarAve}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="口语流利"></p>
                                <p style="color: red;" th:text="${classInfo.spokenAve}"></p>
                                <input type="hidden" name="spokenAve" th:value="${classInfo.spokenAve}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="参与度"></p>
                                <p style="color: red;" th:text="${classInfo.participationAve}"></p>
                                <input type="hidden" name="participationAve" th:value="${classInfo.participationAve}">
                            </div>
                            <div class="thumbnail thumbnailFloat">
                                <p th:text="专注度"></p>
                                <p style="color: red;" th:text="${classInfo.concentrationAve}"></p>
                                <input type="hidden" name="concentrationAve" th:value="${classInfo.concentrationAve}">
                            </div>
                        </td>
                        <td style="padding-top: 10px;" th:unless="${classInfo!=null}"> </td>
                    </tr>
                    <tr>
                        <td class="text-center">近期进步项&<br>已掌握知识点</td>
                        <td>
                            <div class="form-inline">
                                <p>通过对近期的知识点梳理和检测，老师发现你在
                                    <select class="selectpicker" id="masteredKnowledge1" multiple data-actions-box="true" data-style="btn-warning">
                                        <option value="听力">听力</option>
                                        <option value="口语">口语</option>
                                        <option value="词义">词义</option>
                                        <option value="拼写">拼写</option>
                                        <option value="发音">发音</option>
                                        <option value="句型">句型</option>
                                        <option value="语法">语法</option>
                                        <option value="阅读">阅读</option>
                                        <option value="写作">写作</option>
                                    </select>
                                    方面，<input class="form-control" id="masteredKnowledge2" th:value="表现得非常好哦！"><br>你能够做到
                                    <select class="selectpicker" id="masteredKnowledge3" multiple data-actions-box="true" data-style="btn-warning">
                                        <option value="快速反应和理解老师的提问">快速反应和理解老师的提问</option>
                                        <option value="句子表达流畅">句子表达流畅</option>
                                        <option value="快速识别单词含义">快速识别单词含义</option>
                                        <option value="发音清晰正确">发音清晰正确</option>
                                        <option value="熟练运用所学句型结构">熟练运用所学句型结构</option>
                                        <option value="语法概念清晰">语法概念清晰</option>
                                        <option value="懂得如何运用语法规则">懂得如何运用语法规则</option>
                                        <option value="customize">自定义</option>
                                    </select>
                                    <span id="customizeHtml">，</span>
                                    <input class="form-control" id="masteredKnowledge4" th:value="值得表扬！"></p>
                            </div>
                            <input type="hidden" id="masteredKnowledge" value="通过对近期的知识点梳理和检测，老师发现你在var1方面，var2
你能够做到var3，var4">
                            <textarea class="form-control" name="masteredKnowledge" rows="7" th:text="${mistakeRight}">通过对近期的知识点梳理和检测，老师发现你在xx(听力/口语/词义/拼写/发音/句型/语法)方面，表现得非常好哦！
你能够做到xx（快速反应和理解老师的提问/句子表达流畅/快速识别单词含义/发音清晰正确/熟练运用所学句型结构/语法概念清晰，懂得如何运用语法规则），值得表扬！
具体表现为：
①已掌握的目标词汇：
②已掌握的目标句型：
③已掌握的目标字母/字母组合发音规则：

    </textarea>
                        </td>
                    </tr>
                    <tr style="display: none;">
                        <td class="text-center" style="width: 200px;">近期进步项</td>
                        <td>
                            <div class="form-inline">
                                <p>相比之前， 近期你在
                                    <select class="selectpicker" id="progressTerm1" multiple data-actions-box="true" data-style="btn-warning">
                                        <option value="听力">听力</option>
                                        <option value="口语">口语</option>
                                        <option value="词义">词义</option>
                                        <option value="拼写">拼写</option>
                                        <option value="发音">发音</option>
                                        <option value="句型">句型</option>
                                        <option value="语法">语法</option>
                                        <option value="阅读">阅读</option>
                                        <option value="写作">写作</option>
                                    </select>
                                    方面，有
                                    <select class="form-control btn-warning" id="progressTerm2">
                                        <option value="显著">显著</option>
                                        <option value="较明显">较明显</option>
                                    </select>
                                    的提升。希望你能继续保持做得好的方面，获得更大的进步哟！</p>
                            </div>
                            <input type="hidden" id="progressTerm3" value="相比之前， 近期你在var1方面，有var2的提升。希望你能继续保持做得好的方面，获得更大的进步哟！">
<!--                            <textarea class="form-control" name="progressTerm" rows="3">相比之前， 近期你在xx(听力/口语/词义/拼写/发音/句型/语法)方面，有xx(显著/较明显)的提升。希望你能继续保持做得好的方面，获得更大的进步哟！</textarea>-->
                            <textarea class="form-control" name="progressTerm" rows="1"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">近期薄弱项<br>&外教近期着重练习的方面</td>
                        <td  class="form-inline">
                            <div>
                                <p>近期你在
                                    <select class="selectpicker" id="notMasteredKnowledge1" multiple data-actions-box="true" data-style="btn-warning">
                                        <option value="听力">听力</option>
                                        <option value="口语">口语</option>
                                        <option value="词义">词义</option>
                                        <option value="拼写">拼写</option>
                                        <option value="发音">发音</option>
                                        <option value="句型">句型</option>
                                        <option value="语法">语法</option>
                                        <option value="阅读">阅读</option>
                                        <option value="写作">写作</option>
                                    </select>
                                    方面还有待加强
                                </p>
                            </div>
                            <input type="hidden" id="notMasteredKnowledge2" value="近期你在var1方面还有待加强，">
<!--                            <div style="padding-bottom: 10px;" th:utext="${#strings.substringAfter(mistakeErr,'<br>')}"></div>-->
                            <textarea class="form-control" style="width: 100%;" name="notMasteredKnowledge" id="notMasteredKnowledge" th:text="${mistakeErr}" rows="6">具体表现为：
①不能识别xx单词的词义( 在系统中勾选)
②xx单词的拼写错误( 在系统中勾选)
③xx单词的读音拼读不准确( 在系统中勾选)
④对xx字母/xx字母组合的发音规则不熟悉( 在系统中勾选)
⑤对xx句型结构掌握不牢固(在系统中勾选)
    </textarea>
                            <div style="padding-top: 10px;">
                                <select class="selectpicker" onchange="changeMaterialKnowledge(this)">
                                    <option value="">---请选择教材---</option>
                                    <option th:each="item:${knowledgeMaterial}" th:value="${item.id}" th:text="${#strings.concat(item.enname,' | ',item.name)}"></option>
                                </select>
                                <small style="color: red;">提示：选择教材，在下面的错词或知识点选中可以勾选对应教材的知识点，不选教材默认为中教课所填写错词</small>
                            </div>
                            <div id="type1">
                                <select class="selectpicker" name="typeParent" data-live-search="true" onchange="getType($(this))">
                                    <option value="">--请选择--</option>
                                    <option th:each="item:${listType}" th:value="${item.id}" th:data-enname="${item.enName}" th:text="${#strings.concat(item.cnName,'(',item.enName,')')}"></option>
                                </select>
                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">近期学习建议</td>
                        <td>
                            <div>
                                <select class="selectpicker" name="gradeId" data-live-search="true" onchange="getContentList($(this))">
                                    <option value="">---请选择学习建议年级---</option>
                                    <option th:each="item:${listGrade}" th:value="${item.id}" th:text="${item.name}"></option>
                                </select>
                                <select class="selectpicker" name="knowledgeId" data-live-search="true" multiple data-actions-box="true" onchange="getContentList($(this))">
                                    <option th:each="item:${listKnowledge}" th:value="${item.id}" th:text="${item.name}"></option>
                                </select>
                                <select class="selectpicker" name="content" data-live-search="true" multiple data-actions-box="true" onchange="setSuggestionsVal(this)">
                                    <option value="">---请选择学习建议类容---</option>
                                </select>
                            </div>
                            <textarea style="display: none;" id="studySuggestionsBak" th:text="${studySuggestions}"></textarea>
                            <textarea class="form-control" name="studySuggestions" id="studySuggestions" th:text="${studySuggestions}" rows="3" placeholder="参考“各年级学习建议”表格"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">近期上课频率建议<br>(针对水平较弱的学员)</td>
                        <td>
                            <textarea class="form-control" name="studyFrequency" rows="3">根据你阶段知识点检测的情况，老师建议你接下来xx节中教课/每周，xx节外教课/周，以获得更好的学习效果！</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">近期上课内容建议<br>(针对水平较弱的学员)</td>
                        <td>
                            <textarea class="form-control" name="studyContents" rows="3">根据你阶段知识点检测的情况，老师建议你接下来将页码调整到第xx单元第xx页 重新学习和巩固，加深印象，以更好地理解和掌握近期知识点内容。</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">课堂纪律反馈</td>
                        <td>
                            <textarea class="form-control" name="teaComplaint" rows="3" placeholder="课堂纪律反馈" th:text="${#strings.listJoin(listComplaint,'；')}"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">测试成绩</td>
                        <td>
                            <textarea class="form-control" name="testResults" rows="3" placeholder="测试成绩" th:text="${#strings.listJoin(listTestScores,'；')}">

                            </textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">课后作业完成情况</td>
                        <td>
                            <textarea class="form-control" name="homework" rows="3" placeholder="课后作业完成情况" th:if="${homeworkRate!=null}" th:text="${#strings.concat('课后作业完成率：',homeworkRate,'%')}"></textarea>
                            <textarea class="form-control" name="homework" rows="3" placeholder="课后作业完成情况" th:unless="${homeworkRate!=null}"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center">SSC调整页码和调整日期</td>
                        <td>
                            <textarea class="form-control" name="changeMaterial" rows="3" placeholder="填写出所调页码和调整日期" th:text="${changeMaterial==''?'无':changeMaterial}"></textarea>
                        </td>
                    </tr>

                </table>
            </div>
            <div class="row">
                <div style="text-align: center;">
                    <input th:type="hidden" th:name="personId" th:value="${personId}">

                    <button class="btn btn-primary" type="submit" style="margin-right: 20px;"> 保存 & PDF </button>
                    <button class="btn btn-default" th:onclick="|layerClose()|"> 关闭 </button>
                    <div id="mistakeSelect" style="display: none;" th:utext="${mistakeSelect}"></div>
                </div>
            </div>
        </form>
    </div>

</div>
<div th:include="include/onload_js::onloadJSCustomEdit(~{::script})">
    <script>
        $(function () {
            let isClose="[[${isClose}]]";
            if (isClose==="true"){
                layer.msg("保存数据成功",{icon:1},function () {

                    parent.location.reload(true);
                })
            }

            let errMsg="[[${errMsg}]]";
            if (errMsg!==""){
                layer.msg(errMsg,{icon:2});
            }

            if ($.trim($("#startDate").val())===""){
                layer.alert("没有新的中教课，无法添加阶段检测反馈！",{icon:2},function () {
                    layerClose();
                });
            }

            createMistake();

            $("#masteredKnowledge3").change(function (){
                let isCustomize=false;
                let masteredKnowledge3Val=$("#masteredKnowledge3").val();
                if (masteredKnowledge3Val!==null) {
                    for (const items of masteredKnowledge3Val) {
                        if (items === "customize") {
                            isCustomize = true;
                        }
                    }
                }
                if (isCustomize){
                    if ($("#masteredKnowledge4customize").length===0) {
                        $("#customizeHtml").before("<input class=\"form-control\" placeholder='输入自定义内容' id=\"masteredKnowledge4customize\" th:value=\"\">");
                    }
                }else {
                    if ($("#masteredKnowledge4customize").length>0){
                        $("#masteredKnowledge4customize").remove();
                    }
                }
            });
        })
        //获取类别
        function getType(obj) {
            let selectObj=$(obj);
            selectObj.siblings("select").selectpicker('destroy');
            selectObj.siblings("select").remove();
            selectObj.siblings("input").remove();
            let divObj=selectObj.parent();
            $.post("/student/report/list/classification/"+selectObj.val(),{},function (result) {
                if (result.status===1){
                    if (result.data !==null && result.data !=="" && result.data.length>0){
                        // console.log(selectObj.siblings("select").html())
                        let optionData=result.data;
                        // console.log(optionData);
                        let strHtml="<select class=\"selectpicker\" name=\"typeId\" data-live-search=\"true\" data-max-options=\"2\" onchange='createNewSelect($(this))'>";
                        strHtml+='<option value="">--请选择--</option>';
                        for (let i=0;i<optionData.length;i++){
                            if (optionData[i].listChild!=null && optionData[i].listChild.length>0){
                                strHtml+='<optgroup label="'+optionData[i].cnName+'">'
                                for (let j=0;j<optionData[i].listChild.length;j++){
                                    strHtml+='<option value="'+optionData[i].listChild[j].id+'">'+optionData[i].listChild[j].cnName+'</option>';
                                }
                                strHtml+='</optgroup>';

                            } else {
                                strHtml+='<option value="'+optionData[i].id+'">'+optionData[i].cnName+'</option>';
                            }
                        }
                        strHtml+="</select>";
                        divObj.append(strHtml);
                        $('select[name="typeId"]:last').selectpicker();
                        divObj.append(createKnowledge());
                        $('select[name="typeContent"]:last').selectpicker();
                        //创建顺序设置选项
                        strHtml="<select name='typeSort' class=\"form-inline form-control\"><option value=''>-重要排序-</option>";
                        for (let i=1;i<=20;i++){
                            strHtml+="<option value='"+i+"'>"+i+"</option>"
                        }
                        strHtml+="</select>";
                        divObj.append(strHtml);
                        // $('.selectpicker:last').selectpicker();
                    }
                }
            });
        }

        function getContentList(obj) {
            let gradeObj=$("select[name='gradeId']");
            let knowledgeObj=$("select[name='knowledgeId']");
            let contentObj=$("select[name='content']");
            contentObj.empty();
            contentObj.selectpicker("refresh");
            if ($.trim(gradeObj.val())!=="" && $.trim(knowledgeObj.val())!==""){
                $.ajax({
                    url: "/student/report/study/content/" + gradeObj.val(),
                    type: "post",
                    // contentType: "application/json;charset=utf-8",
                    traditional: true,
                    data: {"knowledgeId": knowledgeObj.val()},
                    success: function (result) {
                        if (result.status===1){
                            if (result.data !==null && result.data !=="" && result.data.length>0){
                                let optionData=result.data;
                                let strHtml='';
                                for (let i=0;i<optionData.length;i++){
                                    strHtml+='<optgroup label="'+optionData[i].name+'">';
                                    for (let j=0;j<optionData[i].list.length;j++){
                                        strHtml+='<option value="'+optionData[i].list[j].name+'">'+optionData[i].list[j].name+'</option>';
                                    }
                                    strHtml+='</optgroup>';
                                }
                                contentObj.html(strHtml);
                                contentObj.selectpicker("refresh");
                            }
                        }
                    }

                })
            }
        }
        //学习建议选择赋值
        function setSuggestionsVal(obj) {
            let suggestionsArray=$(obj).val();
            if (suggestionsArray===null){
                $('#studySuggestions').val($("#studySuggestionsBak").val());
            }else {
                let studyVal=$('#studySuggestionsBak').val();
                if ($.trim(studyVal)===""){
                    $('#studySuggestions').val(suggestionsArray.join("\n"));
                }else {
                    $('#studySuggestions').val(studyVal+"\n"+suggestionsArray.join("\n"));
                }

            }
        }
        //关闭当前layer弹出层
        function layerClose() {
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        }

        function checkFeedbackForm() {
            let bl=true;
            let layerIndex=layer.load();
            let masteredKnowledge1=$("#masteredKnowledge1");
            if ($.trim(masteredKnowledge1.val())===""){
                layer.msg("已掌握知识点项中选择框未选",{icon:2});
                bl=false;
            }
            if($.trim($("#masteredKnowledge2").val())===""){
                layer.msg("表现得非常好输入框未输入内容",{icon:2});
                bl=false;
            }
            let masteredKnowledge3=$("#masteredKnowledge3");
            if (bl && $.trim(masteredKnowledge3.val())===""){
                layer.msg("已掌握知识点项中选择框未选",{icon:2});
                masteredKnowledge3.focus();
                bl=false;
            }
            if($.trim($("#masteredKnowledge4").val())===""){
                layer.msg("值得表扬输入框未输入内容",{icon:2});
                bl=false;
            }
            // let progressTerm1=$("#progressTerm1");
            // if (bl && $.trim(progressTerm1.val())===""){
            //     layer.msg("近期进步项中选择框未选",{icon:2});
            //     bl=false;
            // }

            // let progressTerm2=$("#progressTerm2");
            // if (bl && $.trim(progressTerm2.val())===""){
            //     layer.msg("近期进步项中选择框未选",{icon:2});
            //     progressTerm2.focus();
            //     bl=false;
            // }
            let notMasteredKnowledge1=$("#notMasteredKnowledge1");
            if (bl && $.trim(notMasteredKnowledge1.val())===""){
                layer.msg("近期薄弱项项中选择框未选",{icon:2});
                bl=false;
            }

            if (bl) {
                $("select[name='typeId']").each(function () {
                    if ($(this).val() === "") {
                        layer.msg("外教近期着重练习的方面有知识点二级分类未选", {icon: 2});
                        bl = false;
                    }
                });
            }
            if (bl) {
                $("select[name='typeSort']").each(function () {
                    if ($(this).val() === "") {
                        layer.msg("外教近期着重练习的方面有重要性顺序未选", {icon: 2});
                        $(this).focus();
                        bl = false;
                    }
                });
            }
            if (bl) {
                $("[name='typeContent']").each(function () {
                    if ($(this).val() === "") {
                        layer.msg("外教近期着重练习的方面有错词或知识点未选", {icon: 2});
                        $(this).focus();
                        bl = false;
                    }
                });
            }
            if (!bl) {
                layer.close(layerIndex);
                return bl;
            }
            //拼接已掌握的数据
            let masteredKnowledgeVal=$("#masteredKnowledge").val().replace("var1",masteredKnowledge1.val().join('/'))
                .replace("var2",$("#masteredKnowledge2").val())
                .replace("var3",masteredKnowledge3.val().join('/').replace("customize",$("#masteredKnowledge4customize").val()))
                .replace("var4",$("#masteredKnowledge4").val());
            let masteredKnowledge=$("textarea[name='masteredKnowledge']");
            masteredKnowledgeVal+="\r\n";
            masteredKnowledgeVal+=masteredKnowledge.val();
            masteredKnowledge.val(masteredKnowledgeVal);
            //拼接近期进步数据
            // let progressTermVal=$("#progressTerm3").val().replace("var1",progressTerm1.val().join('/')).replace("var2",progressTerm2.val());
            // let progressTerm=$("textarea[name='progressTerm']");
            // progressTerm.val(progressTermVal+'\n'+progressTerm.val());

            //拼接近期薄弱项数据
            let notMasteredKnowledgeVal=$("#notMasteredKnowledge2").val().replace("var1",notMasteredKnowledge1.val().join('/'));
            let notMasteredKnowledge=$("textarea[name='notMasteredKnowledge']");
            notMasteredKnowledge.val(notMasteredKnowledgeVal+notMasteredKnowledge.val());

            if (bl) {

                $("select[name='typeId']").each(function (index) {
                    $(this).attr("name","paramList["+index+"].typeId");
                });
                $("select[name='typeSort']").each(function (index) {
                    $(this).attr("name","paramList["+index+"].typeSort");
                });
                $("[name='typeContent']").each(function (index) {
                    $(this).attr("name","paramList["+index+"].typeContent");
                });
            }
            return bl;
        }
        function createNewSelect(obj) {
            let selectObj=$(obj);
            let divObj=selectObj.parent();
            let selectVal=$("select[name='typeParent']:last").val();
            if ($.trim(selectVal)!=="") {
                let tdObj = divObj.parent();
                let strHtml = "<div><select class=\"selectpicker\" name=\"typeParent\" onchange=\"getType($(this))\">";
                strHtml += divObj.find("select:first").html();
                strHtml += "</select></div>";
                tdObj.append(strHtml);
                $(".selectpicker").selectpicker();
            }

        }

        /**
         * 改变教材，获取教材关联的知识点
         */
        var mistake=$("#mistakeSelect").text();
        mistake=JSON.parse(mistake);
        var selectHtml="";
        function changeMaterialKnowledge(obj) {
            let id=$(obj).val();
            //selectHtml="<option value=''>--选择知识点--</option>";
            selectHtml="";
            if ("" !== id){
                $.post("/student/report/list/knowledge/"+$(obj).val(),{},function (data,status) {
                    if (1 === data.status){
                        let knowledgelist=data.data;
                        for (let name of knowledgelist){
                            selectHtml+="<option value='"+name+"'>"+name+"</option>"
                        }
                    }
                })
            }else {
                createMistake();
            }
            $("select[name='typeContent']").each(function () {
                $(this).html(selectHtml);
                $(this).selectpicker("refresh");
            })
        }

        function createMistake() {
            //selectHtml="<option value=''>--选择错词--</option>";
            selectHtml="<option value=\"0\">自定义</option>";
            for (let mistakeObj of mistake){
                selectHtml+="<optgroup label='"+mistakeObj.firstName+"'>";
                let options=mistakeObj.errInfo.split(" | ");
                for (let name of options){
                    selectHtml+="<option value='/"+name+"'>"+name+"</option>"
                }
                selectHtml+="</optgroup>";
            }
        }
        function createKnowledge() {
            let typeContentHtml="<select class=\"selectpicker\" name=\"typeContent\" multiple title=\"请选择错词|知识点\" data-live-search=\"true\" data-actions-box=\"true\" onchange='customTypeContent(this)'>";
            typeContentHtml+=selectHtml;
            typeContentHtml+="</select>";
            return typeContentHtml;
        }

        function customTypeContent(obj) {
            let selectObj=$(obj);
            let divObj=selectObj.parent();
            //自定义知识点
            let selectVal=selectObj.val();
            if (selectVal instanceof Array){
                for (let i=0;i<selectVal.length;i++){
                    if (selectVal[i]==="0"){
                        selectObj.selectpicker('val', '0');
                        divObj.find("input[name='typeContent']").remove();
                        divObj.append("<input class='form-control' name='typeContent' value='' placeholder='请输入自定义知识点' maxlength='100'>");
                        selectObj.attr("name","");
                    }
                }
                if (divObj.find("input[name='typeContent']").length===0){
                    selectObj.attr("name","typeContent");
                }
            }else{
                if (selectVal === "0") {
                    divObj.append("<input class='form-control' name='typeContent' value='' placeholder='请输入自定义知识点' maxlength='100'>");
                    selectObj.attr("name","");
                }else {
                    divObj.find("input[name='typeContent']").remove();
                    selectObj.attr("name","typeContent");
                }
            }

        }
    </script>
</div>
</body>
</html>